<?php
	include_once 'news.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
<title>Microbrasserie Le Bilboquet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.cookies.2.2.0.min.js"></script>
<script src="news.js"></script>
<script src="redirect.js"></script> </script>
<script>
var oldobject;
	$(function()
		{
				

	
		


	//click news
			$(".newstitle").click(function(){
							$(this).addClass("selected");
							var newid=$(this).attr("id");
							var id=parseInt(newid.replace("news",""));
							$(".newscontenttop").html("");
							$(".bktopimage").attr("src","images/2-2.png");
							$(".newscontenttop").html(news[id].content);
							$(".newspic").attr("src","images/product/"+news[id].pic);
							
							
							
				
				});
		
		
		})
//############################## function ################################################
		function fontpourcentage(currentpagesizel)
		{
			var currentimagesize_w=parseInt(currentpagesizel/17510*100*10);
			var pourcentage=currentimagesize_w+"%"
			return pourcentage;
			
		}
		
		function margintopmenu(currentpagesizeh)
		{
			var margintopmenu_h=parseInt(currentpagesizeh/870*30);
			return margintopmenu_h;
		}
		
		function margintopmenuflex(currentpagesizeh,top)
		{
			var margintopmenu_h=parseInt(currentpagesizeh/870*top);
			return margintopmenu_h;
		}
	
</script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
	body{background:#000;     font-family: helvetica,arial,sans-serif;   font-size: 10pt;    line-height: 16pt;}
	#principal{width:100%;margin:0;padding:0;overflow: hidden;}
	.bkimage{width:25%;}
	.menu{	position:relative;
			background:#000;display:inline-block;
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			font-size:100%;
			
		}
		.logo{width:64%;
			  position:relative;
			  left:-14%;
			  top:-10px;
				float:left;
			 }
		.menulist{
			width:35%;
			float:right;
			font-size:100%
			color:#fff;
			position:relative;
			left:-15%;
			
			}
			
			.MainMenuList{margin-top: -25px;line-height: 230%;font-family: 'Russo One', sans-serif;}
			.menulist ul{
						list-style:none;width:100%;font-size:100%;margin:0;padding:0;
						}
		.menulist ul li{color:#fff;position:relative;width:100%;margin:0;padding:0;line-height:270%;}
		
		.menulist ul li a,.menulist ul li a:visited{color:#fff;text-decoration:none;}
		.menulist ul li a:hover{color:#b8c575;text-decoration:none;}
		.newscontent{
				display:inline-block;
				width:25%;
				position:relative;
				
			}
			.bknewscontent{
					position:relative;
					width:100%;	
			}
			.newcontentdiv{
				color:#fff;
				width:80%;
			  	position:absolute;
			 	 left:11%;
			 	 top:0;
				 display:inline-block;
				 line-height: 150%;
						}
			.botbak{position:absolute;width: 100%;}
			.ls{width:70%;}
			.bktopimage{width:100%;}
			.selected{color:#ccc;}
			.linews {line-height:150%;}
			.newlist  ul li{border-bottom:thin solid #fff;}
			h3 {font-family: 'Russo One', sans-serif ;font-size: 17px;}
			
</style>
</head>
<body>
	<div id="principal">
		<img src="images/1.jpg" id="l11" class="bkimage"/><img src="images/2.jpg" id="l12" class="bkimage" /><span class="bkimage menu"><img src="images/3.jpg" id="l13" class="bktopimage"/>
		<div class="newcontentdiv newscontenttop">
			
				
			</div>
		</span><img src="images/4.jpg" id="l14" class="bkimage"/><br/>
		<img src="images/2-1.jpg" id="l21" class="bkimage" /><div class="bkimage menu" ><img src="images/logo.png" class="logo"/>
		<span class="menulist MainMenuList">
			<ul >
				<li style="color:#b8c575">> ACCUEIL</li>
				<li><a href="microbraserie.php">> MICROBRASSERIE</a></li>
				<li><a href="lepub.php">> LE PUB</a></li>
				<li><a href="articlespromos.php">> ARTICLES PROMOS</a></li>
				<li><a href="capsulesvideos.php">> CAPSULES VIDÉOS</a></li>
				<li><a href="galerie.php">> GALERIE PHOTOS</a></li>
				<li><a href="nousjoindre.php">> NOUS JOINDRE</a></li>
			</ul>
		</span>
		</div><img src="images/2-3.jpg" id="l23" class="bkimage newspic" /><img src="images/2-4.jpg" id="l24" class="bkimage"/><br/>
		<img src="images/3-1.jpg" id="l21" class="bkimage" /><div class="bkimage menu propo" ><img src="images/3-2.jpg" class="botbak"/>
		<div class="newcontentdiv"><a href="https://www.facebook.com/BilboquetMicrobrasserie" target="_new"><img alt="Page Facebook du Bilboquet" src="images/fb.png" style="position: absolute; width: 18%; left: -31%;"></a>
    
		<a href="http://www.youtube.com/user/microbilboquet/feed" target="_new"><img alt="Page YouTube du Bilboquet" src="images/yb.png" style="position: absolute; width: 18%; left: -31%;  top: 60px;"></a>
    
		<p style="font-size:12px; line-height:120%" >	Fondé en 1990 et situé en plein cœur du centre-ville de Saint-Hyacinthe, ce bistro de quartier s'est rapidement démarqué par ses bières de microbrasserie et par son ambiance chaleureuse. <br> En croissance constante, il se spécialise dans les produits brassicoles de dégustation. Une grande variété de bières de qualité y sont brassées, dont 12 en fût à déguster sur place. Nos produits sont présentement distribués à travers un réseau québécois de plus de 400 détaillants et la bière «L'Affriolante» en exclusivité à la SAQ.


</p>
 
				
			</div>
		</div><div class="bkimage menu propo" ><img src="images/3-2.jpg" class="botbak"/>
		<span class="menulist ls newlist ul li ">
			<ul>
				<li style="border:none;"><h3>NOUVELLES</h3></li>
				<?php for($i=0;$i<2;$i++){?>
				<li style="line-height:150%;padding-bottom:5px;font-size: 101%;"><a href="javascript:void(0)" id="news<?php echo $i?>" class="newstitle"><?php echo $news[$i];?></a></li><br/>
				<?php }?>
				
			</ul>
		</span>
		</div><img src="images/3-4.jpg" id="l24" class="bkimage"/><br/>
		
	</div>

</body>
</html>

<script>

window.onload = function(){
	var window_w=$("#principal").width();
	//if(window_w<1025){
	if(window_w<1025){
		$("#principal").width("1372px");
		 window_w=1372;
		
		}else{
			$("#principal").attr("style","");
			var window_w=$("#principal").width();
			
			}
	var fontsize=fontpourcentage(window_w);
	var margintop_menu=margintopmenu(window_w)*0.45+"px";
	$(".menulist ul li").css("font-size",fontsize);
	$(".menulist ").css("top",margintop_menu);
	$(".newcontentdiv").css("font-size",fontsize);
//text news
	var margintop_newcontent=margintopmenuflex(window_w,20)+"px";
	$(".newcontentdiv").css("top",margintop_newcontent);
	$(".newcontentdiv").css("font-size","11px");
	var heightbefore=$(".bkimage").height();
	
	$(".bottomdiv").css("height",heightbefore);
	$(".botbak").css("height",heightbefore);
	$(".propo").css("height",heightbefore);
	semitop=margintopmenuflex(window_w,10)+"px"
	$(".ls").css("top",semitop);
	paramfonsize=fontsize*0.72;
	$.cookies.set('param',fontsize);

//######################  resize page ###################################################

	var heightbefore=$(".bkimage").height();
	
	$(".bottomdiv").css("height",heightbefore);
	$(".botbak").css("height",heightbefore);
	$(".propo").css("height",heightbefore);
	semitop=margintopmenuflex(window_w,10)+"px"
	$(".ls").css("top",semitop);
}
var fixsize=0;
window.onresize=function() {
  	var window_w=$("#principal").width();
  		if(fixsize-window_w!=0){
  	  		
	//if(window_w<1025){
		if(window_w<1025){
		$("#principal").width("1372px");
		 window_w=1372;
		 fixsize=window_w;	
		}else{
			$("#principal").attr("style","");
			var window_w=$("#principal").width();
			fixsize=window_w;	
			}
var fontsize=fontpourcentage(window_w);
var margintop_menu=margintopmenu(window_w)*0.45+"px";
$(".menulist ul li").css("font-size",fontsize);
$(".menulist ").css("top",margintop_menu);
$(".newcontentdiv").css("font-size",fontsize);
//text news
var margintop_newcontent=margintopmenuflex(window_w,20)+"px";
$(".newcontentdiv").css("top",margintop_newcontent);
$(".newcontentdiv").css("font-size","11px");
var heightbefore=$(".bkimage").height();
$(".bottomdiv").css("height",heightbefore);
$(".botbak").css("height",heightbefore);
$(".propo").css("height",heightbefore);
semitop=margintopmenuflex(window_w,10)+"px"
$(".ls").css("top",semitop);
};	
  		}
</script>